<template>
    <div class="popup" v-if="status">
        <!-- 蒙版 -->
        <div class="mask" @click="hide" :class="maskColor?'translucent':'transparent'"></div>
        <!-- 弹出框内容 -->
        <div class="box"  :style="getBodyStyle">
           <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        // 蒙版颜色
        maskColor:{
            type:Boolean,
            default:false
        },
        // 蒙版开启
        mask:{
            type:Boolean,
            default:true
        },
        // 弹出框高度
        bodyHeight:{
            type:Number,
            default:0
        },
        // 弹出框宽度
        bodyWidth:{
            type:Number,
            default:0
        },
        // 是否为顶部弹出框
        up:{
            type:Boolean,
            default:false
        },
        //是否限制y轴长度
        limitY:{
            type:Boolean,
            default:true
        }
    },
    computed:{
        getBodyStyle(){
            if(this.up){
                let result = 'right:.3rem;top:1rem;'
                return result
            }
            else{
            let left = this.x > -1 && this.x > this.maxX ? `left:${this.maxX-this.fontSize}px;` : `left:${this.x}px;`
            let top = this.y > -1 && this.y > this.maxY&&this.limitY===true ?   `top:${this.maxY-this.fontSize*2.5}px;` : `top:${this.y}px;`
            return left + top
            }
            
        }
    },
    data(){
        return{
            status:false,
            x:-1,
            y:-1,
            maxX:0,
            maxY:0,
            fontSize:0
        }
    },
    created(){
        this.getWindowNews()
    },
    methods:{
        show(x=-1,y=-1){
            this.x=x
            this.y=y
            this.status=true
        },
        hide(){
            this.status=false
        },
        // 获取窗口大小
        getWindowNews(){
            this.fontSize =  parseInt(getComputedStyle(window.document.documentElement)['font-size'])
            this.maxX=window.screen.width-this.bodyWidth
            this.maxY=window.screen.height-this.bodyHeight
        }
    }
}
</script>
<style scoped>
    .popup{
        z-index: 999;
        overflow: hidden;
    }
    .mask{
         z-index: 999;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color:rgba(0,0,0,.5);
    }
    .box{
         z-index: 999;
        position: fixed;
    }
    .transparent{
        background-color: rgba(0,0,0,0);
    }
    .translucent{
        background-color: rgba(0,0,0,0.5);
    }
</style>